﻿<template>
  <a-drawer
    :title="title"
    width="40%"
    :visible="visible"
    @ok="handleSubmit"
    @close="
      () => {
        this.visible = false
        BusinessCardURL = false
      }
    "
  >
    <!-- <a-modal
    :title="title"
    width="40%"
    :visible="visible"
    @ok="handleSubmit"
    @cancel="
      () => {
        this.visible = false
      }
    "
  > -->
    <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
      <a-form-model-item label="公司" prop="Remark">
        <a-input disabled v-model="entity.cCusName" autocomplete="off" placeholder="公司" />
      </a-form-model-item>

      <a-row>
        <a-col :span="12">
          <a-form-model-item label="姓名" prop="Name" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
            <a-input v-model="entity.Name" autocomplete="off" :disabled="title == '查看客户联系人信息'" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="职位" prop="Position" :labelCol="{ span: 4 }" :wrapperCol="{ span: 16 }">
            <a-input
              v-model="entity.Position"
              autocomplete="off"
              placeholder="职位"
              :disabled="title == '查看客户联系人信息'"
            />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-form-model-item label="组织机构" prop="Department">
        <a-input
          v-model="entity.Department"
          autocomplete="off"
          placeholder="组织机构"
          :disabled="title == '查看客户联系人信息'"
        />
      </a-form-model-item>

      <a-form-model-item label="角色名称" prop="RoleName">
        <a-select
          v-model="entity.RoleName"
          mode="multiple"
          style="width: 100%"
          placeholder="角色名称"
          :disabled="title == '查看客户联系人信息'"
        >
          <a-select-option v-for="item in userlist" :key="item.Id" :value="item.DicName">
            {{ item.DicName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="电子邮箱" prop="Email">
        <a-input
          :disabled="title == '查看客户联系人信息'"
          v-model="entity.Email"
          autocomplete="off"
          placeholder="电子邮箱"
        />
      </a-form-model-item>

      <a-form-model-item label="电话" prop="Tel_Code">
        <a-input
          v-model="entity.Tel_Code"
          autocomplete="off"
          placeholder="电话"
          :disabled="title == '查看客户联系人信息'"
        />
      </a-form-model-item>

      <a-form-model-item label="省/直辖市">
        <a-select
          showSearch
          :filter-option="filterOption"
          v-model="entity.Province"
          default-value="省/直辖市"
          style="width: 100%"
          @change="city($event)"
          :disabled="title == '查看客户联系人信息'"
        >
          <a-select-option v-for="(item, dei) in list" :key="item.Id" :value="item.Id">
            {{ item.Name }}</a-select-option
          >
        </a-select>
      </a-form-model-item>

      <a-row>
        <a-col :span="12">
          <a-form-model-item label="市" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
            <a-select
              showSearch
              :filter-option="filterOption"
              v-model="entity.City"
              default-value="市"
              style="width: 100%"
              @change="village($event)"
              :disabled="title == '查看客户联系人信息'"
            >
              <a-select-option v-for="(item, dei) in listChildren" :key="item.Id" :value="item.Id">
                {{ item.Name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="区县" :labelCol="{ span: 4 }" :wrapperCol="{ span: 16 }">
            <a-select
              showSearch
              :filter-option="filterOption"
              v-model="entity.County"
              default-value="选择县级"
              style="width: 100%"
              :disabled="title == '查看客户联系人信息'"
            >
              <a-select-option v-for="(item, dei) in county" :key="item.Id" :value="item.Id">
                {{ item.Name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-form-model-item label="详细地址" prop="Address">
        <a-textarea v-model="entity.Address" :disabled="title == '查看客户联系人信息'" autocomplete="off" />
      </a-form-model-item>
      <a-form-model-item label="备注" prop="Remark">
        <a-textarea v-model="entity.Remark" :disabled="title == '查看客户联系人信息'" autocomplete="off" />
      </a-form-model-item>

      <a-form-item label="上传名片" :labelCol="layout.labelCol" :wrapperCol="layout.wrapperCol">
        <c-upload-img
          v-if="BusinessCardURL"
          v-model="entity.BusinessCardURL"
          :imgUrl="'/CustomerManagement/Cust_CustomerLinkMan/UploadFileByForm'"
          :maxCount="1"
        ></c-upload-img>
      </a-form-item>
    </a-form-model>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="close">取消</a-button>&nbsp;
      <a-button type="primary" v-if="title != '查看客户联系人信息'" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import Customer from '@/components/CustomerInfoPotential/Customer.vue'
import CUploadImg from '@/components/CUploadImg/CUploadImg.vue'
export default {
  props: {
    parentObj: Object,
    id: String,
    row: Object
  },
  data() {
    return {
      list: [], //省级
      listChildren: [], //市
      county: [], //县
      BusinessCardURL: false,
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 }
      },
      userlist: [],
      visible: false,
      loading: false,
      entity: {},
      rules: {
        Name: [{ required: true, message: '未输入', trigger: 'blur' }],
        Tel_Code: [{ required: true, message: '未输入', trigger: 'blur' }],
        CustomerName: [{ required: true, message: '未输入', trigger: 'blur' }],
        RoleName: [{ required: true, message: '未输入', trigger: 'blur' }]
      },
      title: '',
      page: ''
    }
  },
  components: {
    Customer,
    CUploadImg
  },
  mounted() {
    this.getlist()
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    close() {
      this.visible = false
      this.BusinessCardURL = false
      this.entity = {}
    },
    getSelsct() {
      this.$http
        .post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', {
          Condition: 'DicKey',
          Keyword: 'RoleName'
        })
        .then(res => {
          if (res.Success) {
            this.userlist = res.Data.DictionaryDetailsList
          }
        })
    },
    //市级change
    city(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then(resJson => {
        this.loading = false
        this.listChildren = resJson.Data
      })
    },

    //县change
    village(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then(resJson => {
        this.loading = false

        this.county = resJson.Data
      })
    },
    //获取省份信息
    getlist(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=0', {}).then(resJson => {
        this.loading = false
        this.list = resJson.Data
      })
    },
    init() {
      this.visible = true
      this.getSelsct()
      this.BusinessCardURL = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title, page) {
      this.page = page
      this.init()
      this.title = title
      this.entity.cCusName = this.row.cCusName
      if (id) {
        this.loading = true

        this.$http.post('/CustomerManagement/Cust_CustomerLinkMan/GetTheData', { id: id }).then(resJson => {
          this.loading = false

          this.entity = resJson.Data
          this.entity.RoleName = this.entity.RoleName.split(',')
          this.entity.cCusName = this.row.cCusName
            this.city(this.entity.Province)
          this.village(this.entity.City)
        })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }

        this.entity.CustomerId = this.row.Id
        this.entity.CustomerName = this.row.cCusName

        this.entity.RoleName = this.entity.RoleName.join(',')
        this.$http.post('/CustomerManagement/Cust_CustomerLinkMan/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.BusinessCardURL = false
            this.visible = false
            this.loading = false
            if (this.page == '申请') {
              this.$emit('pushLink', { Id: Date.now(), Name: this.entity.Name, Tel_Code: this.entity.Tel_Code })
            } else {
              this.parentObj.getDataList()
            }
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
